<template>
  <div class="workLog">
    <div class="workLog-top">
      <span class="datamet" @click="datyMent()">工作计划</span>&nbsp;&nbsp;>&nbsp;
      <span class="datalog" v-if="this.$route.query.type == 1">查看全部计划</span>
      <span class="datalog" v-if="this.$route.query.type == 2">未确认计划</span>
    </div>

    <div class="workLog_table">
      <div class="workLog_tableheader" v-if="this.$route.query.type == 1">
        <span>
          项目名称:
          <el-select v-model="projectId" clearable>
            <el-option v-for="item in this.projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </span>
        &#12288; &nbsp;
        <span>
          时间段：
          <el-select v-model="period" placeholder="全部" style="width: 220px">
            <el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </span>
        &#12288; &nbsp;
        <span>
          <el-button @click="seclet()" size="small" type="primary">查询</el-button>
        </span>
        <div style="margin-left: 20%">
          <span style="font-size: 22px">{{ this.name }}</span>&#12288; &nbsp;
          <span>{{ this.groupName }}</span>
        </div>
      </div>
      <div class="workLog_tableheader" v-if="this.$route.query.type == 2">
        <span>
          职能组:
          <el-select v-model="fid" clearable @change="chengeFid()">
            <el-option v-for="item in groupsList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </span>
      </div>
      <div class="workLog_tablebody">
        <el-table :data="tableData" border style="width: 90%">
          <el-table-column fixed type="index" label="序号" width="50" align="left">
          </el-table-column>
          <!-- <el-table-column prop="functionGroupName" label="职能组" width="150" align="left">
          </el-table-column> -->
          <el-table-column prop="submitterName" label="姓名" width="100" align="left">
          </el-table-column>
          <el-table-column prop="weekPartStr" label="计划日期" width="200" align="left">
          </el-table-column>
          <el-table-column prop="projectName" label="项目名称" width="150" align="left">
          </el-table-column>
          <el-table-column prop="pushTime" label="录入时间" width="150" align="left">
          </el-table-column>
          <el-table-column prop="weekPlanMsg" label="工作内容" width="500" align="left">
          </el-table-column>
          <el-table-column prop="reviewState" label="状态" width="100" align="left">
            <span slot-scope="scope">{{
                scope.row.reviewState == 0 ? "未确认" : "已确认"
            }}</span>
          </el-table-column>
          <el-table-column prop="reviewName" label="确认人" width="100" align="left">
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="left" width="250"><template slot-scope="scope">
              <el-button v-show="userInfo.isLeader == 1" type="success" plain size="mini" @click="queren(scope.row)">
                {{ scope.row.reviewState == 0 ? "确认" : "取消确认" }}
              </el-button>
              <el-button v-show="
                scope.row.reviewState == 0 &&
                userInfo.name == scope.row.submitterName
              " type="primary" plain size="mini" @click="updateEmpPlan(scope.row)">修 改</el-button>
              <el-button v-show="
                scope.row.reviewState == 0 &&
                userInfo.name == scope.row.submitterName
              " type="danger" plain size="mini" @click="deleteEmpPlan(scope.row)">删 除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination v-if="this.$route.query.type == 1 || pageObj" background
          layout="total, sizes, prev, pager, next, jumper" :page-size="pageObj.size" :total="pageObj.total"
          :current-page="pageObj.currentPage" @current-change="pageObj.func" @size-change="handleSizeChange"
          :page-sizes="[2, 5, 10, 15]">
        </el-pagination>
      </div>
    </div>

    <el-dialog title="修改计划" :visible.sync="dialogAddPlan" center width="40%" :close-on-click-modal="false">
      <el-form :model="form" ref="workPlanRef" :rules="workPlan">
        <el-form-item label="计划日期:" :label-width="formLabelWidth">
          <el-select v-model="weekPartStrUpdate" placeholder="请选择" @change="Week" style="width: 70%">
            <el-option v-for="item in opt" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目名称:" :label-width="formLabelWidth">
          <el-select v-model="form.projectId" clearable @change="projectGroup" placeholder="请选择项目" style="width: 70%">
            <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作内容:" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="planMsg" style="width: 70%"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="updatePlan()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  userProgressProjects,
  companyPlan,
  selectFunctionGroupList,
  empToBeConfirmed,
  personPlanList,
  empPlanReview,
  empPlanUpdate,
  empPlanDelete,
} from "@/service/Api";
export default {
  data() {
    return {
      tableData: [],
      fid: this.$route.query.fidId,
      period: "",
      projectId: "",
      projectList: [],
      groupsList: [],
      options: [],
      islead: "",
      routeType: this.$route.query.type,
      uid: this.$route.query.uid,
      name: this.$route.query.name,
      groupName: this.$route.query.groupName,
      pageObj: {
        size: 10,
        total: 0,
        height: "75vh",
        currentPage: 1,
        func: (currentPage) => {
          this.pageTurning(currentPage);
        },
      },
      pn: 1,
      ps: 10,
      userInfo: "",
      dialogAddPlan: false,
      formLabelWidth: "150px",
      form: {},
      weekPartStrUpdate: "",
      planMsg: "",
      opt: [],
      workPlan: {},
      id: "",
    };
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    if (this.routeType == 2) {
      this.chengeFid();
      this.groups();
    } else if (this.routeType == 1) {
      this.getProject();
      this.weekDate();
    }
  },
  methods: {
    weekDate() {
      companyPlan(1).then((res) => {
        if (res.code == 0) {
          this.opt = res.data;
          this.weekPartStrUpdate = res.data[0];
        }
      });
      companyPlan(-1).then((res) => {
        if (res.code == 0) {
          this.options = res.data;
          if (this.period == "") {
            this.period = res.data[0];
          }
          this.options.unshift("全部");
          this.seclet();
        }
      });
    },

    groups() {
      let userInfo = sessionStorage.getItem("userInfo");
      let id = JSON.parse(userInfo).id;
      selectFunctionGroupList(id).then((res) => {
        if (res.code == 0) {
          if (JSON.parse(userInfo).fid == 0) {
            this.groupsList = res.data;
            let list = [
              {
                id: 0,
                name: "所有职能组",
              },
            ];
            list.push(...res.data);
            this.groupsList = list;
          } else {
            this.groupsList = res.data;
          }
          this.groupsList.forEach((item) => {
            if (item.name == this.groupName) {
              this.fid = item.id;
            }
          });
        }
      });
    },

    getProject() {
      userProgressProjects().then((res) => {
        if (res.code == 0) {
          this.projectList = res.data;
        }
      });
    },

    datyMent() {
      this.$router.push({
        name: "weekly",
        params: {
          id: 39,
        },
      });
    },

    chengeFid() {
      let data = {
        fids: this.fid,
        pn: this.pn,
        ps: this.ps,
      };
      empToBeConfirmed(data).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.records;
          this.pageObj.total = res.data.total;
          this.pageObj.currentPage = res.data.current;
          this.pageObj.size = res.data.size;
        }
      });
    },

    updateEmpPlan(row) {
      this.form = row;
      this.weekPartStrUpdate = row.weekPartStr;
      this.planMsg = row.weekPlanMsg;
      this.id = row.id;
      this.dialogAddPlan = true;
    },
    cancel() {
      this.dialogAddPlan = false;
    },
    updatePlan() {
      if (this.planMsg == "" && this.form.projectId == "") {
        this.$message({
          message: "工作内容和项目名称不能为空",
          type: "warning",
        });
      } else if (this.planMsg == "") {
        this.$message({
          message: "工作内容不能为空",
          type: "warning",
        });
      } else if (this.form.projectId == "") {
        this.$message({
          message: "项目名称不能为空",
          type: "warning",
        });
      } else {
        let data = {
          id: this.id,
          weekPartStr: this.weekPartStrUpdate,
          projectId: this.form.projectId,
          weekPlanMsg: this.planMsg,
        };
        empPlanUpdate(data).then((res) => {
          if (res.code == 0) {
            this.$message({
              message: res.message,
              type: "success",
            });
          }
          this.seclet();
          this.dialogAddPlan = false;
        });
      }
    },
    projectGroup() {
      if (!val) {
        return;
      } else {
        let pro = {};
        pro = this.projectList.find((item) => {
          return item.id === val;
        });
      }
    },
    Week() {
      let pro = {};
      pro = this.opt.find((item) => {
        return item === val;
      });
    },
    deleteEmpPlan(row) {
      this.$confirm("确认删除此计划吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.id = row.id;
          empPlanDelete(this.id).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.seclet();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    queren(row) {
      if (row.reviewState == 0) {
        let data = {
          id: row.id,
          state: 1,
        };
        empPlanReview(data).then((res) => {
          if ((res.code = 0)) {
            this.$message({
              message: "已确认",
              type: "success",
            });
          }
          if (this.routeType == 2) {
            this.chengeFid();
          } else if (this.routeType == 1) {
            this.seclet();
          }
        });
      } else {
        let data = {
          id: row.id,
          state: 0,
        };
        empPlanReview(data).then((res) => {
          if (res.code == 0) {
            this.$message({
              message: "已取消确认",
              type: "success",
            });
          }
          if (this.routeType == 2) {
            this.chengeFid();
          } else if (this.routeType == 1) {
            this.seclet();
          }
        });
        this.reviewName = "";
      }
    },

    handleClick() { },

    seclet() {
      if (this.period == "全部") {
        this.period = "";
      }
      let data = {
        planDateStr: this.period,
        projectId: this.projectId,
        uId: this.uid,
        pn: this.pn,
        ps: this.ps,
      };
      personPlanList(data).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.records;
          this.pageObj.total = res.data.total;
          this.pageObj.currentPage = res.data.current;
          this.pageObj.size = res.data.size;
        }
      });
    },

    //   翻页
    pageTurning(currentPage) {
      this.pageObj.currentPage = currentPage;
      this.pn = currentPage;
      if (this.routeType == 2) {
        this.chengeFid();
      } else if (this.routeType == 1) {
        this.seclet();
      }
    },
    handleSizeChange(val) {
      this.ps = val;
      if (this.routeType == 2) {
        this.chengeFid();
      } else if (this.routeType == 1) {
        this.seclet();
      }
    },
  },
};
</script>

<style scoped>
.workLog {
  height: 100%;
}

.workLog-top {
  display: flex;
  padding: 20px 20px 0 20px;
}

.datalog {
  font-weight: bolder;
}

.datamet {
  cursor: pointer;
}

.datamet:hover {
  color: red;
}

.workLog_table {
  margin-top: 25px;
  margin-left: 100px;
}

.workLog_tableheader {
  display: flex;
  width: 90%;
  align-items: center;
  margin: 10px 20px 0 0px;
  padding: 10px 10px;
  border: 1px solid #e8eef5;
  background: #f9f9f9;
}

.titconet {
  width: 74%;
  text-align: center;
  font-size: 15px;
}

.titconet span:nth-child(1) {
  font-weight: bold;
  font-size: 23px;
}
</style>